
<template>
    <div class="app-container">
        <el-form ref="form" :model="form" :rules="rules" label-width="80px">            
            <el-form-item label="名称" prop="name" >
                <el-input v-model="form.name" placeholder="请输入名称"  />
            </el-form-item>            
            <el-form-item label="编号" prop="num" >
                <el-input-number v-model="form.num" ></el-input-number>
            </el-form-item>            
            <el-form-item label="创建时间" prop="createAt" >
                <el-date-picker clearable size="small" style="width: 200px"
                                v-model="form.createAt"
                                type="datetime"
                                value-format="yyyy-MM-dd HH:mm:ss"
                                placeholder="选择创建时间" >
                </el-date-picker>
            </el-form-item>            
            <el-form-item label="截图" prop="image" >
                <el-upload 
                           v-loading="upLoading"
                           class="avatar-uploader"
                           :action="apiUrl+'/system/upload/upImg'"
                           :show-file-list="false"
                           name="file"
                           :data="setUpData()"
                           :on-success="handleAvatarSuccess"
                           :before-upload="beforeAvatarUpload"
                >
                    <img v-if="imageBlob" :src="imageBlob" class="avatar" />
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>            
            <el-form-item label="描述" prop="desc" >
                <el-input v-model="form.desc" type="textarea" placeholder="请输入描述"  />
            </el-form-item>            
            <el-form-item label="描述2" prop="desc2" >                
                    <Editor v-model="form.desc2" />                
            </el-form-item>            
        </el-form>        
    </div>
</template>
<script>
import {
    getDemoSimple,
    createDemoSimple,
    updateDemoSimple,    
    changeDemoSimpleEnable,    
} from "@/api/demo/demoSimple";
import { getToken } from "@/utils/auth";
import { getUserProfile } from "@/api/system/user";
import {genCode} from '@/api/code.js';
import dayjs from 'dayjs'
export default {
    name: "DemoSimpleEditor",
    components:{
        Editor:()=>import('@/components/Editor'),        
    },
    props: [        
    ],
    data() {
        return {            
            // 图片上传地址
            imageBlob: "",
            // 上传加载
            upLoading: false,            
            // 表单参数
            form: {},
            params: {},
            // 表单校验
            rules: {                
            },
            user:{}
        };
    },
    methods: {
        // 表单重置
        async reset() {            
            // 重新加载选项            
            // 重置表单值
            this.form = {                
                id: undefined,                
                name: undefined,                
                num: undefined,                
                createAt: undefined,                
                image: undefined,                
                desc: undefined,                
                desc2: undefined,                
                enable: undefined,                
            };
            // 重置相关参数            
            this.imageBlob = ''            
            this.resetForm("form");
        },        
        async show(params){
            await this.reset();
            getDemoSimple(params.id).then(response => {
                let data = response.data;                
                    this.imageBlob = this.getUpFileUrl(this.apiUrl, data.image);                
                this.form = data;                
            });
        },        
        // 提前提交
        precreate(){
            this.$refs["form"].validate(valid => {
                if (valid) {
                    if (!this.form.id) {
                        createDemoSimple(this.form).then(response => {
                            if (response.code === 0) {
                                this.form.id = response.data.id;
                            } else {
                                this.msgError(response.msg);
                            }
                        });
                    }
                }
            });
        },
        // 正常提交
        submitForm: function(done) {
            this.$refs["form"].validate(valid => {
                if (valid) {                    
                    if (this.form.id != undefined) {
                        updateDemoSimple(this.form).then(response => {
                            if (response.code === 0) {
                                this.msgSuccess("修改成功");
                                done()
                            } else {
                                this.msgError(response.msg);
                            }
                        });
                    } else {
                        createDemoSimple(this.form).then(response => {
                            if (response.code === 0) {
                                this.msgSuccess("新增成功");
                                done()
                            } else {
                                this.msgError(response.msg);
                            }
                        });
                    }
                }
            });
        },
        genCode(){            
        },
        getUser() {
            return getUserProfile().then(response => {
                this.user = response.data;
            });
        },        
        handleAvatarSuccess(res, file) {
            if (res.code === 0) {
                this.imageBlob = URL.createObjectURL(file.raw);
                this.form.image = res.data.fileInfo.fileUrl;
            } else {
                this.msgError(res.msg);
            }
            this.upLoading = false;
        },
        beforeAvatarUpload(file) {
            this.upLoading = true;
            return true;
        },
        setUpData() {
            return { token: getToken() };
        },        
    }
};
</script>
<style>    
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409eff;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }    
    .quill-file {
        height: 0;
    }
    .quill-editor {
        height: auto !important;
    }    
</style>